<template>
  <div>
    <el-form size="small" ref="dataForm" label-width="120px" :model="dataForm" :rules="rules">
      <el-row>
        <el-col>
          <el-form-item label="分类名称" prop="typeTitile">
            <el-input v-model="dataForm.typeTitile" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="备注信息">
            <el-input v-model="dataForm.remark" resize="none" type="textarea" maxlength="300" rows="5" show-word-limit clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :offset="16">
        <el-button type=""  @click="closeEdit">
          取消
        </el-button>
        <el-button type="primary"  @click="saveData">
          <fa-icon class="fa-check" />保存
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'add-type',
  data () {
    return {
      dataForm: {
        typeTitile: '',
        isOpen: true,
        remark: ''
      },
      rules: {
        typeTitile: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      }
    }
  },
  mounted () {},
  methods: {
    // 保存
    saveData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$emit('updataSuccess', this.dataForm)
        }
      })
    },
    closeEdit () {
      this.$emit('close')
    }
  }
}
</script>
